// 由于需要大量用到上下文中的方法和属性

// 所以，setup函数一定要定义为function
export default function() {
	const { $ref, $reactive, $val } = $modules;
	// 将对象本身定义为响应式数据
	const user = $reactive({
		name: '张三',
		age: 18
	});
	// 定义响应式数据，初始值为1
	const count = $ref(1);

	setInterval(() => {
		// 使用ref构造的响应式，value属性上
		++count.value;
	}, 1000)

	this.add(
		this.render({
			// $val：基于响应式数据构造观察器
			// 当user中的name属性变化，则自动更新
			children: $val(user, 'name'),
			// 点击试试
			onClick: () => {
				user.name = '李四'
			}
		}),
		this.render({
			// $val：基于响应式数据构造观察器
			// 当count中的value属性变化，则自动更新
			children: $val(count, 'value')
		})
	)
}